Reorganize stats page and show cover art grid #3373
Conversation
Show an album grid instead of a list of cards, with the artists on the side. Show tracks as a grid to take advantage of the space.
This allows for automatic scaling in the browser See https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
Add an option to customize the number of entities to show in UserTopEntity component. 12 entities works well both for division by 2 and by 3 columns
Margins were set for desktop sizes only and looked mangled on mobile
MonkeyDo
force-pushed
the
stats-layout
branch
from
b9113b1 to
3b4f04c
Compare
|
@Aerozol kindly asking for your input on this, it's been a long time we've been talking about adding some cool cover art in the stats page, so here it is finally :) |
|
Very cool @MonkeyDo! I just recently made a related ticket :0 I looove that this shows the album art grid, but imo it's a a regression in terms of being able to easily see my stats at a glance. I really like having the three 'top X' columns right next to each other. Having top artists and top tracks in such different configurations bugs me. My suggestion would be to keep the Top X columns as-is, and instead make "Listening Activity" 2/3rds, and put the art grid next to it as 1/3rd. |
Summin' like this? Collapses in mobile sizes: |
Reinstating the three columns as before, after feedback from aerozol on the changes in previous commits, and adding the album grid next to the listening activity at the top.
As per design mockup from aerozol
|
OK, I also implemented the button you designed (minus slightly different icon...): I think we will eventually want to add the same button for other top entities, but pointing to a specific template (some are artist-based, some album-based), which we can't currently do. |
With more stats added this month, I think it is a good time to implement some improvements I have been thinking about, namely adding a cover art grid to show the top albums, and using the listen card grid (used on some other pages) for the top tracks, to save a bit of space.
Had to modify an attribute on the template SVGs to allow automatic resizing in the browser (addition of
preserveAspectRatio="xMinYMin meet").Finally, also made sure that the top album and artist columns expand to the size of the tallest one
Before:
After:
On mobile: